<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { useGetEnterpriseCustomerDetail } from '@fl/api/supplier'
import { downloadFileWithUrl, singleFileJsonObj } from '@fl/utils/fn'
import { cloneDeep } from 'lodash-es'

const id = defineModel<string>('id', { required: true })
const visible = defineModel<boolean>('visible', { required: true })

const initialState = {} as any
const state = ref(cloneDeep(initialState))

const { data: enterpriseCustomerDetailData, isLoading: isGetEnterpriseCustomerDetailLoading } = useGetEnterpriseCustomerDetail(id)

// #region Form
const isFormLoading = computed(() => isGetEnterpriseCustomerDetailLoading.value)

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 12,
        },
        label: '合作客户名称',
        prop: 'name',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '开始合作时间',
        prop: 'startTime',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '上年度合作金额',
        prop: 'money',
        renderField: (value: any) => `${value}万元`,
    },
    {
        colProps: {
            span: 12,
        },
        label: '合同附件',
        prop: 'contractFile',
    },
    {
        colProps: {
            span: 12,
        },
        label: '案例附件',
        prop: 'caseFile',
    },
]
// #endregion

// #region UI Listener
function closed() {
    id.value = ''
}
// #endregion

watchEffect(() => {
    if (enterpriseCustomerDetailData.value) {
        state.value = cloneDeep(enterpriseCustomerDetailData.value)
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                :title="state.name"
                width="800"
                :has-footer="false"
                close-on-press-escape
                @closed="closed"
    >
        <el-skeleton v-if="isFormLoading"
                     animated
        />

        <PlusForm v-else
                  v-model="state"
                  :columns="columns"
                  :label-width="120"
                  :has-footer="false"
                  :row-props="{ gutter: 40 }"
        >
            <template #plus-field-contractFile>
                <span class="text-#409EFF truncate cursor-pointer"
                      @click="downloadFileWithUrl(singleFileJsonObj(state.contractFile).url, singleFileJsonObj(state.contractFile).name)"
                >
                    {{ singleFileJsonObj(state.contractFile).name }}
                </span>
            </template>

            <template #plus-field-caseFile>
                <span class="text-#409EFF truncate cursor-pointer"
                      @click="downloadFileWithUrl(singleFileJsonObj(state.caseFile).url, singleFileJsonObj(state.caseFile).name)"
                >
                    {{ singleFileJsonObj(state.caseFile).name }}
                </span>
            </template>
        </PlusForm>
    </PlusDialog>
</template>

<style lang="scss" scoped>
:deep(.el-form-item--default) {
    margin-bottom: 0;
}
</style>
